<template>
	<view class="myPage">
		<view class="scroll_page" v-if='leftList.length'>
			<view class="page">
				<view class="left" ref="left">
					<view class="right_item" v-for="(item,i) in leftList" :key="i">
						<view class="right_image" v-if="item.fileType == '0'" @click="goto(item)">
							<image class="image" :src="img_baseUrl+item.imgPath" mode="widthFix"></image>
							<view class="title">{{item.title}}</view>
							<view class="per">
								<view class="per_lf">
									<img :src="img_baseUrl + item.avatar" alt="">
									<text>{{item.nickName?item.nickName:""}}</text>
								</view>
								<view class="per_rt">
									<image :src="`${img_baseUrl}/statics/std/static/eye.png`" alt="">
        					<text>{{item.viewNum}}</text>
								</view>
							</view>
							<view class="addrees">
								<image :src="`${img_baseUrl}/statics/std/static/dingwei.png`">
								</image>
								<view class="">
									{{item.addr?item.addr:""}}
								</view>
							</view>
						</view>
						<view class="right_video" v-else @click="gotoVideo(item)">
							<video class="video" :show-center-play-btn="false" loop object-fit="cover"
								:enable-play-gesture="true" :controls="false"
								:src="img_baseUrl+item.imgPath"></video>
							<image class="play" :src="`${img_baseUrl}/statics/std/static/bofang.png`"
								mode=""></image>
							<view class="video_center">
								<view class="addrees">
									<image :src="`${img_baseUrl}/statics/std/static/dingwei.png`">
									</image>
									<view class="">
										{{item.addr?item.addr:""}}
									</view>
								</view>
								<view class="per">
									<view class="per_lf">
										<image :src="img_baseUrl + item.avatar" alt="">
											<text>{{item.nickName?item.nickName:""}}</text>
									</view>
									<view class="per_rt">
        						<text>{{item.viewNum}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
				<view class="right" ref="right">
					<view class="right_item" v-for="(item,i) in rightList" :key="i">
						<view class="right_image" v-if="item.fileType == '0'" @click="goto(item)">
							<image class="image" :src="img_baseUrl+item.imgPath" mode="widthFix"></image>
							<view class="title">{{item.title}}</view>
							<view class="per">
								<view class="per_lf">
									<img :src="img_baseUrl + item.avatar" alt="">
									<text>{{item.nickName?item.nickName:""}}</text>
								</view>
								<view class="per_rt">
										<image :src="`${img_baseUrl}/statics/std/static/eye.png`" alt="">
      						<text>{{item.viewNum}}</text>
								</view>
							</view>
							<view class="addrees">
								<image :src="`${img_baseUrl}/statics/std/static/dingwei.png`">
								</image>
								<view class="">
									{{item.addr?item.addr:""}}
								</view>
							</view>
						</view>
						<view class="right_video" v-else @click="gotoVideo(item)">
							<video class="video" :show-center-play-btn="false" loop object-fit="cover"
								:enable-play-gesture="true" :controls="false"
								:src="img_baseUrl+item.imgPath"></video>
							<image class="play" :src="`${img_baseUrl}/statics/std/static/bofang.png`"
								mode=""></image>
							<view class="video_center">
								<view class="addrees">
									<image :src="`${img_baseUrl}/statics/std/static/dingwei.png`">
									</image>
									<view class="">
										{{item.addr?item.addr:""}}
									</view>
								</view>
								<view class="per">
									<view class="per_lf">
										<image :src="img_baseUrl + item.avatar" alt="">
											<text>{{item.nickName?item.nickName:""}}</text>
									</view>
									<view class="per_rt">
											<image :src="`${img_baseUrl}/statics/std/static/look.png`" alt="">
      							<text>{{item.viewNum}}</text>
									</view>
								</view>
							</view>
						</view>
					</view>
				</view>
			</view>
			<view class="loadMore">{{ (leftList.length > 0 && loadMore) ? "数据加载中" : "没有更多内容了"}}</view>
		</view>
		<view class="noData" v-else>
			<image :src="`${img_baseUrl}/statics/std/static/noData.png`"></image>
			<text>暂未发布任何内容</text>
		</view>
    <image class="release" :src="`${img_baseUrl}/statics/std/static/release.png`" @click="link('/page_my/travels/release')"></image>
	</view>
</template>

<script>
	import {
		requestGet
	} from "@/utils/request.js";

	export default {
		data() {
			return {
				headerClassName: "",
				listData: [],
				userInfo: null,
				leftList: [], //左边列图片
				rightList: [], //右边列图片
				leftHeight: 0, //左边列高度
				rightHeight: 0, //右边列高度
				columnWidth: 0,
				img_baseUrl: process.env.VUE_APP_BASEURL_IMG_API,
				loadMore: true,
				total: 0,
				pages: {
					pageNum: 1,
					pageSize: 10
				},
			};
		},
		onShow() {
			uni.getSystemInfo({
				success: (res) => {
					this.columnWidth = res.windowWidth * 0.48
				}
			})
			this.userInfo = Object.prototype.toString.call(uni.getStorageSync('X-UserInfo')) === "[object Object]" ? uni
				.getStorageSync('X-UserInfo') : null;
			this.pages = {
				pageNum: 1,
				pageSize: 10
			};
			this.total = 0;
			this.loadMore = true;
			this.leftList = [];
			this.rightList = [];
			this.leftHeight = 0; //左边列高度
			this.rightHeight = 0; //右边列高度
			if (this.userInfo) {
				this.getTravel();
			}
		},
		computed: {
			isAdmin() {
				let flag = false;
				const role = (this.userInfo && this.userInfo.roles) ? this.userInfo.roles.filter(i => i.roleKey == 'check') : [];
				flag = role.length > 0 ? true : false;
				return flag
			}
		},
    onReachBottom() {
      this.getTravel();
    },
		methods: {
			// 获取我的发布列表
			getTravel() {
				if (!this.loadMore) {
					return
				}
				requestGet("/applet/notes/list", {
						userId: this.userInfo.userId,
						...this.pages
					}, "/baseplatform")
					.then((res) => {
						if (res.code === 200) {
							this.total = res.total;
							this.setWaterFallLayout(res.rows);
						}
					})
					.catch((err) => console.log("错误了", err));
			},
			async setWaterFallLayout(arr) {
				for (let item of arr) {
					try {
						let h = 0;
						if (item.fileType == 0) {
							if (item.imgPath) {
								h = (await this.getImgHeight(this.img_baseUrl + item.imgPath)) * this.columnWidth + 40;
							} else {
								h = 264
							}
						} else if (item.fileType == 1) {
							h = 440
						}
						console.log('瀑布流左右高度333333', h, this.leftHeight, this.rightHeight)
						if (h) {
							if (this.leftHeight <= this.rightHeight) {
								this.leftList.push(item)
								this.leftHeight += h
							} else {
								this.rightList.push(item)
								this.rightHeight += h
							}
						}
					} catch (e) {}
				}
				if (this.leftList.length + this.rightList.length < this.total) {
					this.loadMore = true;
					this.pages.pageNum = this.pages.pageNum + 1;
				} else {
					this.loadMore = false;
				}
			},
			getImgHeight(url) {
				return new Promise((resolve, reject) => {
					uni.getImageInfo({
						src: url,
						success: e => {
							resolve(e.height / e.width)
						},
						fail: e => {
							reject(e)
						}
					})
				})
			},
      link(url) {
      	uni.navigateTo({
      		url,
      	});
      },
			// 游记详情
			goto(item) {
				uni.navigateTo({
					url: `/page_my/travels/detail?id=${item.id}`
				})
			},
			//短视频游记详情
			gotoVideo(item) {
				uni.navigateTo({
					url: `/page_my/travels/detailVideo?id=${item.id}`
				})
			},
		},
	};
</script>

<style lang="scss" scoped>
	.myPage {
		height: 100vh;
		width: 100%;
		position: relative;
    background: #F5F7F6;
		.scroll_page {
			width: 100%;
			.loadMore {
				display: block;
				width: 100%;
				font-size: 24rpx;
				color: rgba(0, 0, 0, 0.5);
				text-align: center;
				line-height: 64rpx;
			}
		}
    .release{
      position: fixed;
      right: 32rpx;
      bottom: 180rpx;
      width: 196rpx;
      height: 72rpx;
    }
		.page {
				display: flex;
				align-items: flex-start;
				padding: 0 40rpx;
				box-sizing: border-box;
        padding-top: 24rpx;
				&::-webkit-scrollbar {
					display: none !important;
				}

				.left,
				.right {
					margin: 0 auto;
					width: 48%;
				}

				.right_item {
					// width: 48%;
					margin-bottom: 24rpx;

					.right_image {
						position: relative;

						.image {
							width: 100%;
							// height: auto;
							margin-bottom: 16rpx;
							border-radius: 24rpx;
						}

						.title {
							width: 100%;
							height: 40rpx;
							font-size: 28rpx;
							font-weight: 700;
							color: rgba(0, 0, 0, 0.7);
							line-height: 40rpx;
							overflow: hidden; //溢出隐藏
							text-overflow: ellipsis; //省略号
							white-space: nowrap; //强制文本不换行
						}

						.info {
							width: 100%;
							height: 200rpx;
							background-color: #55aa7f;
						}

						.per {
							display: flex;
							justify-content: space-between;
							align-items: center;
							margin-top: 24rpx;
							margin-bottom: 48rpx;

							.per_lf {
								display: flex;
								align-items: center;

								image {
									width: 32rpx;
									height: 32rpx;
                  border-radius: 16rpx;
									display: block;
									margin-right: 8rpx;
								}

								text {
									font-size: 24rpx;
									font-weight: 400;
									color: rgba(0, 0, 0, 0.8);
									line-height: 32rpx;
									margin-right: 8rpx;
								}
							}

							.per_rt {
								display: flex;
								align-items: center;

								image {
									width: 24rpx;
									height: 24rpx;
									display: block;
									margin-right: 8rpx;
								}

								text {
									font-size: 24rpx;
									font-weight: 400;
									color: #777F8F;
									line-height: 32rpx;
								}
							}
						}

						.addrees {
							position: absolute;
							bottom: 140rpx;
							left: 16rpx;
							padding: 8rpx 12rpx;
							background-color: rgba(0, 0, 0, 0.4);
							border-radius: 24rpx 24rpx 24rpx 24rpx;
							display: flex;
							justify-content: flex-start;
							align-items: center;
							width: 60%;

							image {
								width: 24rpx;
								height: 24rpx;
								margin-right: 8rpx;
								flex: 0 0 auto;
							}

							view {
								font-size: 24rpx;
								color: #FFFFFF;
								display: -webkit-box;
								-webkit-line-clamp: 1;
								/* 控制最多显示两行 */
								-webkit-box-orient: vertical;
								overflow: hidden;
								text-overflow: ellipsis;
							}
						}
					}

					.right_video {
						min-height: 440rpx;
						position: relative;

						.video {
							width: 100%;
							height: 440rpx;
							// margin-bottom: 16rpx;
							border-radius: 24rpx;
							object-fit: cover;
						}

						.play {
							width: 64rpx;
							height: 64rpx;
							position: absolute;
							top: 24rpx;
							right: 24rpx;
						}

						video::-webkit-media-controls-start-playback-button {
							display: none;
						}

						.video_center {
							position: absolute;
							bottom: 26rpx;
							left: 0;
							width: 100%;

							.title {
								width: 100%;
								height: 40rpx;
								font-size: 28rpx;
								font-weight: 700;
								color: rgba(0, 0, 0, 0.7);
								line-height: 40rpx;
								overflow: hidden; //溢出隐藏
								text-overflow: ellipsis; //省略号
								white-space: nowrap; //强制文本不换行
							}

							.info {
								width: 100%;
								height: 200rpx;
								background-color: #55aa7f;
							}

							.per {
								display: flex;
								justify-content: space-between;
								align-items: center;
								margin-top: 32rpx;
								padding: 0 16rpx;
								// margin-bottom: 48rpx;

								.per_lf {
									display: flex;
									align-items: center;
									padding: 0 16rpx;

									image {
										width: 32rpx;
										height: 32rpx;
                    border-radius: 16rpx;
										display: block;
										margin-right: 8rpx;
									}

									text {
										font-size: 24rpx;
										font-weight: 400;
										color: #fff;
										line-height: 32rpx;
										margin-right: 8rpx;
									}
								}

								.per_rt {
									display: flex;
									align-items: center;

									image {
										width: 24rpx;
										height: 24rpx;
										display: block;
										margin-right: 8rpx;
									}

									text {
										font-size: 24rpx;
										font-weight: 400;
										color: #fff;
										line-height: 32rpx;
									}
								}
							}

							.addrees {
                width: 60%;
								padding: 8rpx 12rpx;
								background-color: rgba(0, 0, 0, 0.4);
								border-radius: 24rpx 24rpx 24rpx 24rpx;
								display: flex;
								justify-content: flex-start;
								align-items: center;
								margin-left: 16rpx;

								image {
									width: 24rpx;
									height: 24rpx;
									margin-right: 8rpx;
                  flex: 0 0 auto;
								}

								view {
									font-size: 24rpx;
									color: #FFFFFF;
                  display: -webkit-box;
                  -webkit-line-clamp: 1;
                  /* 控制最多显示两行 */
                  -webkit-box-orient: vertical;
                  overflow: hidden;
                  text-overflow: ellipsis;
								}
							}
						}
					}
				}
			}
	}
</style>
